<template>
  <scroll-view
    class="viewport"
    scroll-y
    scroll-with-animation
    :scroll-top="scrollTop"
    @scroll="handleScroll"
  >
    <!-- 导航栏 -->
    <NavBar></NavBar>

    <!-- 动态 -->
    <PostList></PostList>

    <!-- 2个按钮 -->
    <image v-if="gobackflag" src="/static/images/back.png" class="back-to-top-icon" @click="goTop">
    </image>

    <navigator
      url="/pages/index/meet/components/publish"
      open-type="navigate"
      hover-class="navigator-hover"
      class="send"
    >
      <image src="/static/Meet/sendinpage.png" class="button-send" v-if="gobackflag"> </image>
    </navigator>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NavBar from './components/NavBar.vue'
import PostList from './components/PostList.vue'
const gobackflag = ref(false)
const scrollTop = ref(0)

// 一键回到顶部
function goTop() {
  scrollTop.value = 1 // 设置一个非零值来触发更新
  setTimeout(() => {
    scrollTop.value = 0 // 然后再设置为0
  }, 10)
}

// 显示按钮
function handleScroll(e: any) {
  if (e.detail.scrollTop > 100) {
    gobackflag.value = true
  } else {
    gobackflag.value = false
  }
}
</script>

<style scoped>
.viewport {
  padding: 0 30rpx;
  height: 100vh;
  /* 确保scroll-view高度是固定的 */
}

/* 返回顶部 */
.back-to-top-icon {
  position: fixed;
  bottom: 50rpx;
  right: 20rpx;
  width: 70rpx;
  height: 70rpx;
}

/* 发布按钮 */
.send {
  position: fixed;
  bottom: 50rpx;
  left: calc(100vw - 50vw - 40rpx);
  width: 90rpx;
  height: 90rpx;
}
</style>
